<template>
    <div class="navbar clearfix" v-if="breadcrumb"  >
        <div class="navbar-content">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-if="roles == 'STUDENT'" :to="{ path: item.path }" v-for="item in breadcrumb" :key="item.path" >{{ item.name == '我的教学' ? '我的学习' : item.name  }}</el-breadcrumb-item>
                <el-breadcrumb-item v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER' || roles == 'ADMIN' || roles == 'INTERNET_ADMIN' || roles == 'SUPER_ADMIN'" :to="{ path: item.path }" v-for="item in breadcrumb" :key="item.path">{{ item.name }}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="navbar-back" @click="GoBack" v-if="!studentExamList">
                <i class="iconfont icon-fanhui3"></i>
                <span>返回</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Navbar",
        // /Teaching/MyCourses/Examination/StudentExamList
        data() {
            return {
                levelList:null,
                roles: '',
                // 判断学生端考试返回显隐
                studentExamList: false
            };
        },
        created () {
            this.roles = this.$store.state.user.roles[0]
            this.studentList()
        },
        mounted () {
            this.routerData =  this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb : '';
        },
        methods: {
            fetchDate(data){
                this.routerData =  data.meta ? data.meta : '';
            },
            studentList(){
                if(this.$route.matched.length > 3){
                    if(this.$route.matched[3].path == '/Teaching/MyCourses/Examination/StudentExamList'){
                        this.studentExamList = true
                    }
                }else{
                    this.studentExamList = false
                }
            },
            // 返回上一步
            GoBack() {
                window.history.back(-1)
            }
        },
        computed:{
            breadcrumb(){
                return  this.$route.meta.breadcrumb;
            }
        },
        watch: {
            "$route": "fetchDate",
            "$route": "studentList"
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .navbar{
        height: 40px;
    }
    .navbar-content{
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    }
    .app-breadcrumb.el-breadcrumb {
        display: inline-block;
        font-size: 14px;
        line-height: 50px;
        margin-left: 10px;
        .no-redirect {
            color: #97a8be;
            cursor: text;
        }
    }
    .navbar-back{
        float: right;
        cursor: pointer;
        margin-top: 18px;
        span{
            font-size: 12px;
        }
        &:hover{
            color: #1277eb;
        }
    }
</style>
